<template>
  <div style="width: 100%">
    <template v-for="(item, index) in props.modelValue" :key="index">
      <div
        style="
          border: 1px solid rgb(220, 223, 230);
          margin-bottom: 10px;
          padding: 5px;
          border-radius: 5px;
        "
      >
        <ElRow>
          <ElCol :span="2">
            <label>表单绑定</label>
          </ElCol>
          <ElCol :span="5">
            <ElSelect v-model="item.formId">
              <ElOption
                v-for="(item, index) in props.selOptions"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></ElOption>
            </ElSelect>
          </ElCol>
          <ElCol :span="2">
            <label>时段选择</label>
          </ElCol>
          <ElCol :span="8">
            <MultipleTime v-model="item.multipleTime"></MultipleTime>
          </ElCol>
          <ElCol :span="2">
            <label>提交次数</label>
          </ElCol>
          <ElCol :span="3"
            ><ElInputNumber v-model="item.submitCount" style="width: 100%"></ElInputNumber
          ></ElCol>
          <ElCol :span="2">
            <div style="text-align: right">
              <ElButton v-if="!index" @click="plusData(index)">新增</ElButton>
              <ElButton type="danger" v-if="index" @click="minusData(index)">删除</ElButton>
            </div>
          </ElCol>
        </ElRow>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import MultipleTime from '../components/MultipleTimeRange.vue'

interface IModel {
  formId: string
  multipleTime: string | Array<{ startTime: string; endTime: string }>
  submitCount: number
}

interface ISelectOption {
  label: string
  value: string
}

const defaultVal: IModel = {
  formId: '',
  multipleTime: '',
  submitCount: 1,
}

const props = withDefaults(
  defineProps<{
    modelValue: IModel[]
    selOptions?: Array<ISelectOption>
  }>(),
  {
    modelValue: () => [],
    selOptions: () => [
      {
        label: '静配中心 调配间每日清场清洁消毒检查表',
        value: '静配中心 调配间每日清场清洁消毒检查表',
      },
      {
        label: '温湿度表单1',
        value: '温湿度表单1',
      },
      {
        label: '温湿度表单2',
        value: '温湿度表单2',
      },
      {
        label: '温湿度表单3',
        value: '温湿度表单3',
      },
    ],
  },
)

// 当前选择的时间范围
const curChoose = ref<IModel[]>([])

// 初始化数据
const initializeData = () => {
  if (!props.modelValue || !Array.isArray(props.modelValue)) {
    curChoose.value = [defaultVal]
    return
  }

  curChoose.value = props.modelValue.map((m) => ({ ...m }))
}

// 添加时间范围
const plusData = (index: number) => {
  curChoose.value.splice(curChoose.value.length + 1, 0, defaultVal)
  handleDataEmits()
}

// 删除时间范围
const minusData = (index: number) => {
  if (index === 0) return
  curChoose.value.splice(index, 1)
  handleDataEmits()
}

const emits = defineEmits(['update:modelValue'])
// 统一处理数据回显
const handleDataEmits = () => {
  const filteredData = curChoose.value
  if (!filteredData.length) {
    emits('update:modelValue', [])
    return
  }
  emits('update:modelValue', filteredData)
}

// 监听父组件传递的 modelValue 变化
watch(
  () => props.modelValue,
  () => {
    initializeData()
  },
  { immediate: true },
)

// 初始化数据
initializeData()
</script>

<style></style>
